<template>
  <div class="content">
    <!-- <div class="step-list">
      <div v-for="(item, index) in stepList" :key="index">
        <div :class="['circle', active == item.step && 'active']">
          {{ item.step }}
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div> -->

    <!-- <div class="device-msg" v-if="active != 3">
      <img class="device-img" src="" alt="" />
      <div class="model">设备型号: {{ detail.model }}</div>
      <div class="">设备编号: {{ detail.code }}</div>
    </div>
    <div v-if="active == 1">
      <van-field
        v-model="formState.id"
        label=""
        left-icon="smile-o"
        placeholder="输入SSID"
      />
      <van-field
        v-model="formState.password"
        label=""
        left-icon="smile-o"
        placeholder="输入初始密码"
      />
    </div>
    <div v-if="active == 2" class="d-flex flex-column j-center">
      <img src="" alt="" class="kd-img" />
      <div class="kd-text">{{ kdText[kdStatus] }}</div>
    </div> -->

    <template v-if="active == 3">
      <div v-if="!connect" class="connect-box">
        <div class="connect-card">
          <div class="connect-title">扫设备二维码激活</div>
          <div class="connect-step d-flex a-center w-100">
            <div class="flex-1 mr-16">
              <div class="connect-tip">1、这是添加说明的步骤1</div>
              <div class="connect-tip">2、这是添加说明的步骤2</div>
              <div class="connect-tip">3、这是添加说明的步骤3</div>
            </div>
            <div>
              <!-- <img src="" alt="" />
              <img src="" alt="" /> -->
              <van-icon name="arrow" @click="onScanQrCode" class="add-btn" />
            </div>
          </div>
        </div>
        <div class="connect-card" v-if="deviceNo">
          <div class="connect-title">输入设备机器码</div>
          <van-field v-model="deviceSn" placeholder="请输入设备机器码" />
          <van-button class="comfirm-btn" type="primary" @click="comfirmAdd">确认添加</van-button>
        </div>
        <!-- <div class="connect-card">
          <div class="connect-title">输入设备二维码激活</div>
          <div class="connect-step d-flex a-center w-100">
            <div class="flex-1 mr-16">
              <div class="connect-tip">1、这是添加说明的步骤1</div>
              <div class="connect-tip">2、这是添加说明的步骤2</div>
              <div class="connect-tip">3、这是添加说明的步骤3</div>
            </div>
            <div>
              <van-icon name="arrow" @click="" class="add-btn"/>
            </div>
          </div>
        </div> -->
      </div>
      <div v-else></div>
    </template>

    <div class="btn-list" v-if="active != 3">
      <div @click="active += 1">{{ btnText }}</div>
      <div>切换为宽带配网</div>
      <div>已用第三方软件完成配网</div>
    </div>

    <div class="d-flex flex-column mt-60">
      <div class="tip-title">如何进行配网?</div>
      <div class="tip-list">
        <div class="tip">1、这是设备配网的操作1</div>
        <div class="tip">2、这是设备配网的操作2</div>
        <div class="tip">3、这是设备配网的操作3</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { postJsapiSignature, postMpDeviceAdd } from "@/api/index";
import { getCurrentInstance } from "vue";
// import { wxConfig } from "@/utils/wx.js"; //公共方法
import { Notify } from "vant";
const router = useRouter()
const stepList = ref([
  {
    step: 1,
    name: "输入密码",
  },
  {
    step: 2,
    name: "宽带连接",
  },
  {
    step: 3,
    name: "设备激活",
  },
  //   {
  //     step: 3,
  //     name: "设备激活",
  //   },
]);
const active = ref(3);
const formState = reactive({
  id: "",
  password: "",
});
const btnText = computed(() => {
  if (active == 2 && kdStatus == 1) {
    return "重新配网";
  } else {
    return "确认";
  }
});
const detail = ref({
  model: "1212121",
  code: "1212121",
});

const deviceNo = ref("");
const deviceSn = ref("");
// main.js的微信常量
const { proxy } = getCurrentInstance();
//点击扫码
const onScanQrCode = () => {
  postJsapiSignature({
    url: window.location.href.split("#")[0],
  }).then((res) => {
    const { appId, timestamp, nonceStr, signature } = res.data;
    proxy.$wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: appId, // 必填，公众号的唯一标识
      timestamp: Number(timestamp), // 必填，生成签名的时间戳
      nonceStr: nonceStr, // 必填，生成签名的随机串
      signature: signature, // 必填，签名
      jsApiList: ["checkJsApi", "scanQRCode"], // 必填，需要使用的JS接口列表
    });
    proxy.$wx.ready(() => {
      proxy.$wx.scanQRCode({
        needResult: 1,
        scanType: ["qrCode"],
        success: function (res) {
          // url 就是识别的结果
          deviceNo.value = res.resultStr;
        },
        fail: (err) => {
          alert("err", err);
          console.log(err);
        },
      });
    });
  });
  // vue2 直接使用 this.$wx
  // wxConfig(proxy.$wx, () => {
  //   proxy.$wx.scanQRCode({
  //     needResult: 1,
  //     scanType: ["qrCode"],
  //     success: function (res) {
  //       // url 就是识别的结果
  //       deviceNo.value = res.resultStr;
  //     },
  //   });
  // });
};

const comfirmAdd = () => {
  if (!deviceSn.value) {
    Notify({ type: "danger", message: "请输入设备机器码" });
    return;
  }
  postMpDeviceAdd({
    deviceNo: deviceNo.value,
    deviceSn: deviceSn.value,
  }).then((res) => {
    Notify({ type: "success", message: "添加成功" });
    router.go(-1);
  });
};

const kdStatus = ref("0");
const kdText = {
  0: "宽带连接中...",
  1: "宽带连接失败，请重新连接",
  2: "宽带完成",
};
</script>

<style lang="less" scoped>
.content {
  background: #f8f8f8;
  padding: 60px;
  .step-list {
    display: flex;
    position: relative;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      font-size: 20px;
      position: relative;
      &:first-child {
        .name {
          transform: translateX(calc(-50% + 50px));
          width: max-content;
        }
      }
      &:last-child {
        position: absolute;
        right: 1px;
        align-items: flex-end;
        .name {
          transform: translateX(calc(50% - 50px));
          width: max-content;
        }
      }
      &:not(:first-child) {
        &:not(:last-child) {
          transform: translateX(-50%);
          text-align: center;
          &::after {
            left: calc(50% + 60px);
            width: calc(100% - 170px);
            //   transform: translateX(calc(50% + 50px));
          }
          .circle {
            margin: 0 auto 20px;
          }
        }
      }
      &:not(:last-child) {
        &::after {
          content: "";
          height: 2px;
          //   width: calc(100% - 150px);
          position: absolute;
          top: 50px;
          left: 110px;
          right: 60px;
          // transform: translate(-50%,-50%);
          background: #ccc;
        }
      }
    }
    .name {
      font-size: 32px;
    }

    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid #fedc00;
      font-size: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      position: relative;

      &.active {
        background: #fedc00;
      }
    }
  }
  .device-msg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 100px auto 50px;
    font-size: 28px;
    .model {
      margin-bottom: 15px;
    }
  }
  .device-img {
    width: 350px;
    height: 150px;
    text-align: center;
    margin-bottom: 30px;
    background: #ccc;
  }
  .btn-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 48px;
    > div {
      height: 70px;
      width: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 40px;
      background: #e9e9e9;
      color: #a5a5a5;
      font-size: 34px;
      &:first-child {
        background: #fedc00;
        color: #0e0c00;
      }
    }
  }
  .tip-title {
    color: #cbcbcb;
    margin-bottom: 20px;
    font-size: 34px;
  }
  .tip-list {
    display: flex;
    flex-direction: column;
    // align-items: center;
    gap: 10px;
    font-size: 32px;
    color: #cbcbcb;
  }
  .kd-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 auto 30px;
  }
  .kd-text {
    font-size: 30px;
    text-align: center;
  }
  .connect-box {
    margin-top: 100px;
  }
  .connect-card {
    background: #fff;
    box-shadow: 0 0 10px #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    margin-bottom: 32px;
  }

  .connect-title {
    font-size: 36px;
    font-weight: 600;
    color: #191919;
    margin-bottom: 40px;
  }
  .connect-step {
    display: flex;
    justify-content: space-between;
    align-self: flex-start;
    > div {
      display: flex;
      flex-direction: column;
      gap: 20px;
      color: #9f9f9f;
      font-size: 32px;
    }
    .connect-tip {
    }
    .add-btn {
      font-size: 48px;
      color: #fedc00;
    }
  }

  .comfirm-btn {
    height: 60px;
    margin-top: 30px;
  }
}
</style>
